<template>
    <div class="submenu">
        <div v-for="item in list" :key="item.id">
            <el-submenu v-auth="item.remarks" v-if="isNotEmpty(item.children)" :index="item.id">
                <template slot="title">
                    <i :class="item.icon"></i>
                    <span>{{item.title}}</span>
                </template>
                <div v-for="item in item.children" :key="item.id">
                    <el-submenu v-auth="item.remarks" v-if="isNotEmpty(item.children)" :index="item.id">
                        <template slot="title">
                            <i :class="item.icon"></i>
                            <span>{{item.title}}</span>
                        </template>       
                        <el-menu-item v-auth="item.remarks" v-for="item in item.children" :key="item.id" :index="item.path" @click="goPage(item)">
                            <i :class="item.icon"></i>
                            {{item.title}}
                        </el-menu-item>
                    </el-submenu>
                    <el-menu-item v-auth="item.remarks" v-else :index="item.path" @click="goPage(item)">
                        <template slot="title">
                            <i :class="item.icon"></i>
                            {{item.title}}
                        </template>
                    </el-menu-item>
                </div>
            </el-submenu>

            <el-menu-item v-auth="item.remarks"  v-else :index="item.path" @click="goPage(item)">
                <template slot="title">
                    <i :class="item.icon"></i>
                    <span>{{item.title}}</span>
                </template>
            </el-menu-item>
        </div>

    </div>
</template>

<script>
import { mapActions,mapState } from 'vuex'
export default {
    name: "Submenu",
    props: {
        list: Array,
    },
    data() {
        return {
        }
    },
    computed: {
        ...mapState({
            UserPermissions: state => state.roleInfo.userPermissions
        })
    },
    async mounted() {
        if(__permissionList.length == 0 || __permissionList == undefined || this.UserPermissions == []) {
            console.log('__permissionList无数据--重新加载');
            await this.getUserPermissions().then(() => {
                location.reload()
            })
        }
    },
    methods: {
        ...mapActions("roleInfo", ["getUserPermissions"]),
        // 开始跳转
        goPage(item) {
            let { path } = item
            //let { path: currentPath } = this.$route
            this.$router.push(path)
        },
        // 判断路由是否为空
        isNotEmpty(children) {
            if(children){
                return true
            }
            return false
        }
    }
}
</script>

<style lang="scss" scoped>
</style>